<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<link rel="stylesheet" href="/static/css/metro-all.min.css">
	<link rel="stylesheet" href="/static/css/schemes/darcula.min.css">
</head>
<body class="bg-dack">
	<!--  -->
	<header class="grid text-center">
		<div class="row mt-5">
				<div class="cell"></div>
				<figure class="cell-10">
					<img class="mx-auto img-container rounded" src="/static/image/logo1.png" style="width:60%">
					<figcaption class="text-center fg-white"><h4>DreamCC</h4></figcaption>
				</figure>
				<div class="cell"></div>
			</div>
	</header>
	<!--  -->
	<section>
		<article class="grid text-center">
			<form data-role="validator" action="javascript:" data-on-validate-form="_submitForm">
			<div class="row mb-2">
				<div class="cell"></div>
				<div class="cell-10">
					<input type="text" data-role="input" placeholder="请输入用户名" name="user"  
					data-prepend="<span class='mif-user'></span>"
					data-clear-button="false"
					data-validate="required minlength=6 maxlength=24">
					<span class="invalid_feedback text-left">
					必填 5到24个字符
					</span>
				</div>
				<div class="cell"></div>
			</div>
			<div class="row mb-2">
				<div class="cell"></div>
				<div class="cell-10">
					<input type="password" data-role="input" placeholder="请输入密码" name="pass"
					data-prepend="<span class='mif-key'></span>"
					data-clear-button="false"
					data-validate="required minlength=5 maxlength=24">
					<span class="invalid_feedback text-left">
					必填 6到24个字符
					</span>
				</div>
				<div class="cell"></div>
			</div>
			<div class="row mb-2">
				<div class="cell"></div>
				<div class="cell-10 ">
					<div class="row">
						<div class="cell-8">
							<input type="text" data-role="input" placeholder="验证码" name="code"
							data-prepend="<span class='mif-unlock'></span>"
							data-clear-button="false"
							data-validate="required length=4">
							<span class="invalid_feedback text-left">
							必填 4个字符
							</span>
						</div>
						<div class="cell-4 ml-0">
							<img style="width:100%;height:35px;" src="http://www.dreamcc.com/admin/login/code.html" alt="" onclick="this.src=this.src">
						</div>
					</div>
				</div>
				<div class="cell"></div>
			</div>
			<div class="row mb-2">
				<div class="cell"></div>
				<div class="cell-4 text-left">
					<input type="checkbox" data-role="checkbox" data-caption="记住我" data-validate="" name="remember">
				</div>
				<div class="cell-4 text-right">
					<input type="checkbox" data-role="checkbox" checked="checked" data-caption="登陆协议" data-validate="required" data-validate="" name="agree">
					<span class="invalid_feedback text-right">
					必须同意该协议
					</span>
				</div>
				<div class="cell"></div>
			</div>
			<div class="row mb-2">
				<div class="cell"></div>
				<div class="cell-5 pr-1"><button class="button w-100 ml-auto">登录</button></div>
				<div class="cell-5 pl-1"><a class="button w-100 mr-auto">注册</a></div>
				<div class="cell"></div>
			</div>
			</form>
		</article>
	</section>
	<!--  -->
	<footer class="grid text-center">
		<div class="row mb-2">
			<div class="cell"></div>
			<div class="cell-10 pr-1 text-right"><a href="">忘记密码</a></div>
			<div class="cell"></div>
		</div>
		<div class="row mb-2 mt-15">
			<div class="cell"></div>
			<div class="cell-10">
				<button class="button">
					<span class="icon mif-linux"></span>
				</button>
				<button class="button">
					<span class="icon mif-favorite"></span>
				</button>
				<button class="button">
					<span class="icon mif-search"></span>
				</button>
			</div>
			<div class="cell"></div>
		</div>
	</footer>
</body>
<foot>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script src="/static/js/metro.min.js"></script>
	<script>

	function _submitForm()
	{
		var url = 'http://www.dreamcc.com/admin/login/login.html';
		var data = $("form").serializeArray();
		$.post(url,data,function(res)
		{
			if (0 !== res.code) Metro.toast.create(res.msg, null, 5000);
			else
			{
				Metro.toast.create('登录中', function()
				{
					window.location.href = 'http://www.dreamcc.com/admin/index/index.html';
				}, 3000);
				
			}
		});
	}

	</script>
</foot>
</html>
